<template>
  <div class="user-HBase resCommon">
    <div class="search">
        <div class="classify">
          <el-radio-group v-model="activeName" @change="toggle">
            <el-radio-button label="public">公共</el-radio-button>
            <el-radio-button label="tenant">私有</el-radio-button>
            <el-radio-button label="share">共享</el-radio-button>
          </el-radio-group>
        </div>
        <div class="searchBox">
            <search placeholder="请输入搜索内容" :live-search="true" :search-word.sync="searchName" @search="searchCon"/>
        </div>
    </div>
    <!-- 目录面包屑 -->
    <el-breadcrumb v-if="breadcrumbList.length>1" class="breadcrumb-wrap" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item 
            v-for="(item, index) in breadcrumbList"
            :key="item.id"
            @click.native="onClickBread(item, index)">
            <span class="cursor">{{item.name}}</span>
        </el-breadcrumb-item>
    </el-breadcrumb>
    <div v-else class="breadVisbility"></div>
    <!-- 表格 -->
    <el-table :data="resourcePublic" stripe style="width: 100%">
      <el-table-column prop="spaceName" :label="tableHead[clickStep-1]">
        <template slot-scope="scope">
            <el-button v-if="clickStep==1" @click="menuDetail(scope.row)" type="text">{{scope.row.spaceName}}</el-button>
            <el-button v-if="clickStep==2" @click="menuDetail(scope.row)" type="text">{{scope.row.tableName}}</el-button>
            <span v-if="clickStep==3">{{scope.row.columnFamilyName}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="powerList" label="拥有权限">
          <template slot-scope="scope">
              <span>{{scope.row.powerList}}</span>
          </template>
      </el-table-column>
    </el-table>
    <!-- 分页(默认 10条/页) -->
    <pagenation :pageInfo='pageinfo'></pagenation>
  </div>
</template>

<script>
import resource from '@/mixins/resource'
import Pagenation from '@/components/resource/Pagenation'
import Search from '@/components/common/Search'
export default {
  mixins:[resource],
  components:{Pagenation,Search},
  data() {
    return {
      activeName: "public",
      title:'命名空间',
      pageinfo: {
        tenantNum: 0,
        currentPage: 1
      },
      tableHead:['命名空间','表名','列族名'],
      clickStep:1,
    };
  },
  mounted(){
    this.breadcrumbList = [
        {
            name: '返回',
            id: '0'
        }
    ],
    this.getResourceList();
  },
  methods: {
    toggle(){
        this.isPowerDisabled = true;
        let tab = this.activeName;
        this.breadcrumbList =  [
            {
                name: '返回',
                id: '0'
            }
        ]
        this.clickStep = 1;
        this.pageIndex=1
        this.pageinfo.currentPage=1
        this.currentPage = 1;
        this.getResourceList();
    },
  }
};
</script>

<style lang="scss" scoped>
@import '../../styles/resCommon.scss';
</style>
<style>
.search{
    display: flex;
    justify-content: flex-end;
}
.powerOption{
    color: #409EFF;
    font-size: 14px;
    padding: 0px 8px;
    background: #D0E7FF;
    border: 1px solid #409EFF;
    border-radius: 4px;
    margin-right: 8px;
}
</style>